<template>
  <view class="search-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          type="text"
          v-model="keyword"
          placeholder="搜索帖子"
          confirm-type="search"
          @confirm="handleSearch"
          focus
        />
        <uni-icons 
          v-if="keyword" 
          type="clear" 
          size="16" 
          color="#999"
          @click="clearKeyword"
        ></uni-icons>
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>

    <!-- 搜索历史 -->
    <view class="search-history" v-if="!keyword && recentSearches.length > 0">
      <view class="section-header">
        <text class="title">搜索历史</text>
        <uni-icons 
          type="trash" 
          size="16" 
          color="#999"
          @click="clearHistory"
        ></uni-icons>
      </view>
      <view class="history-list">
        <view 
          class="history-item"
          v-for="(item, index) in recentSearches"
          :key="index"
          @tap="useKeyword(item.keyword)"
        >
          <uni-icons type="search" size="16" color="#999"></uni-icons>
          <text>{{ item.keyword }}</text>
        </view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search" v-if="!keyword">
      <view class="section-header">
        <text class="title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view 
          class="hot-item"
          v-for="(item, index) in hotKeywords"
          :key="index"
          @tap="useKeyword(item.keyword)"
        >
          <text class="rank" :class="{ 'top3': index < 3 }">{{ index + 1 }}</text>
          <text>{{ item.keyword }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      recentSearches: [],
      hotKeywords: []
    }
  },

  onLoad() {
    this.loadRecentSearches()
    this.loadHotKeywords()
  },

  methods: {
    // 加载最近搜索
    async loadRecentSearches() {
      try {
        const { data } = await this.$api.community.search.getRecentSearches()
        this.recentSearches = data || []
      } catch (error) {
        console.error('加载搜索历史失败:', error)
      }
    },

    // 加载热门搜索
    async loadHotKeywords() {
      try {
        const { data } = await this.$api.community.search.getHotKeywords()
        this.hotKeywords = data || []
      } catch (error) {
        console.error('加载热门搜索失败:', error)
      }
    },

    // 使用搜索词
    useKeyword(keyword) {
      this.keyword = keyword
      this.handleSearch()
    },

    // 执行搜索
    async handleSearch() {
      if (!this.keyword.trim()) return
      
      try {
        // 记录搜索历史
        await this.$api.community.search.recordSearch(this.keyword.trim())
        
        // 跳转到搜索结果页
        uni.navigateTo({
          url: `/pages/community/search/result?keyword=${encodeURIComponent(this.keyword.trim())}`
        })
      } catch (error) {
        console.error('搜索失败:', error)
      }
    },

    // 清空关键词
    clearKeyword() {
      this.keyword = ''
    },

    // 清空搜索历史
    async clearHistory() {
      try {
        await uni.showModal({
          title: '提示',
          content: '确定要清空搜索历史吗？'
        })
        
        await this.$api.community.search.clearSearchHistory()
        this.recentSearches = []
        
        uni.showToast({
          title: '已清空搜索历史',
          icon: 'success'
        })
      } catch (error) {
        console.error('清空搜索历史失败:', error)
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  min-height: 100vh;
  background-color: #fff;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .search-input {
    flex: 1;
    height: 72rpx;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      margin: 0 20rpx;
    }
  }
  
  .cancel-btn {
    font-size: 28rpx;
    color: #666;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
}

.history-list {
  padding: 0 30rpx;
  
  .history-item {
    display: flex;
    align-items: center;
    height: 88rpx;
    
    text {
      font-size: 28rpx;
      color: #666;
      margin-left: 20rpx;
    }
  }
}

.hot-list {
  padding: 0 30rpx;
  
  .hot-item {
    display: flex;
    align-items: center;
    height: 88rpx;
    
    .rank {
      width: 40rpx;
      font-size: 32rpx;
      color: #999;
      font-weight: bold;
      
      &.top3 {
        color: #ff5500;
      }
    }
    
    text {
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style> 